import React, { lazy } from "react"
import Home from "../views/Home"
import Login from "../views/Login/index"
// import About from "../views/About"
// 懒加载
// 报错A component suspended while responding to synchronous input, This will cause the UI to be replaced with a
// loading indicator.
//懒加载的模式的组件的写法，外面需要套一层 Loading 的提示加载组件
// const About = lazy(() => import("../views/About"))
// const User = lazy(() => import("../views/User"))

const Page1 = lazy(() => import("../views/Page1"))
const Page2 = lazy(() => import("../views/Page2"))
const Page301 = lazy(() => import("../views/Page301"))
const Page302 = lazy(() => import("../views/Page302"))
const Page303 = lazy(() => import("../views/Page303"))
const Page401 = lazy(() => import("../views/Page401"))
const Page402 = lazy(() => import("../views/Page402"))
const Page5 = lazy(() => import("../views/Page5"))
const withLoadingComponents = (components: JSX.Element) => (
    <React.Suspense fallback={<div>loading...</div>}>{components}</React.Suspense>
)

import { Navigate } from "react-router-dom"

// 嵌套路由
const routes = [
    {
        path: "/",
        element: <Navigate to="/page1" />
    },
    {
        path: "/",
        element: <Home />,
        children: [
            {
                path: "/page1",
                element: withLoadingComponents(<Page1 />)
            },
            {
                path: "/page2",
                element: withLoadingComponents(<Page2 />)
            },
            {
                path: "/page3/page301",
                element: withLoadingComponents(<Page301 />)
            },
            {
                path: "/page3/page302",
                element: withLoadingComponents(<Page302 />)
            },
            {
                path: "/page3/page303",
                element: withLoadingComponents(<Page303 />)
            },
            {
                path: "/page4/page401",
                element: withLoadingComponents(<Page401 />)
            },
            {
                path: "/page4/page402",
                element: withLoadingComponents(<Page402 />)
            },
            {
                path: "/page5",
                element: withLoadingComponents(<Page5 />)
            }
        ]
    },
    {
        path: "/login",
        element: withLoadingComponents(<Login />)
    },
    {
        path: "*",
        element: <Navigate to="/page1" />
    },
    // {
    //     path: "/home",
    //     element: <Home />
    // },
    // {
    //     path: "/about",
    //     element: withLoadingComponents(<About />)
    // },
    // {
    //     path: "/user",
    //     element: withLoadingComponents(<User />)
    // }
]
export default routes